<template>
  <div class="home">
    <el-container>
      <el-header>
        <div>
          <i class="el-icon-office-building" style="margin-left: 20px"></i>
          <span>员工订餐系统</span>
        </div>
        <div>
          <el-menu
            class="el-menu-demo"
            :default-active="path"
            mode="horizontal"
            background-color="#409EFF"
            text-color="#fff"
            active-text-color="#fff"
            style="user-select: none;"
            :router="true"
          >
            <el-submenu index="1" style="width: 200px">
              <template slot="title">
                <img class="headPhoto" :src="headPhoto" alt="">
                {{uname}}
              </template>
              <el-menu-item v-for="item in userMenu" :index="item.path" :key="item.key">
                <i :class="item.icon" style="color: #fff"></i>
                {{item.title}}
              </el-menu-item>
              <el-menu-item @click="logout">
                <i class="menu-item icon-quit" style="color: #fff"></i>
                退出
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <!--左侧导航栏-->
          <el-menu
            :default-active="path"
            class="el-menu-vertical-demo"
            :router="true"
            :default-openeds="menuIndex"
            style="user-select: none;"
          >
            <el-submenu v-for="(submenu, index) in menuData" :key="submenu.id" :index="index+''">
              <template slot="title">
                <i :class="submenu.icon"></i>
                <span>{{submenu.title}}</span>
              </template>
              <el-menu-item v-for="item in submenu.children" @click="menuClick(item.path)" :index="item.path" :key="item.id">
                <i :class="item.icon"></i>
                <span>{{item.title}}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!--主体内容区域-->
          <div class="tags">
            <div>
              <el-tag id="tag" class="tag" style="background-color: white;" @click="handleClick('/welcome', '')">首页</el-tag>
              <el-tag :id="'tag'+index" class="tag" style="background-color: white" closable v-for="(item, index) in tags" @close="handleClose(index)"
                      @click="handleClick(item.path, index)" :key="index">{{item.title}}</el-tag>
            </div>
          </div>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
    export default {
        name: 'Home',
        data() {
            return {
                uname: this.$store.state.uname,
                menuData: this.$store.state.menuData.slice(1),
                userMenu: this.$store.state.menuData[0].children,
                menuIndex: [],
                path: this.$route.path,
                tags: this.$store.state.tags,
                nowTagIndex: null
            }
        },
        methods: {
            /**
             * 退出登录
             */
            logout() {
                localStorage.clear()
                sessionStorage.clear()
                this.$message.success("退出")
                setTimeout(() => {
                    this.$router.push("/login")
                } ,1000)
            },
            /**
             * 菜单点击事件
             */
            menuClick(path) {
                let flag = false
                for (let i = 0; i < this.tags.length; i++) {
                    if (this.tags[i].path === path) {
                        this.nowTagIndex = i
                        flag = true
                        break
                    }
                }
                !flag && (this.nowTagIndex = "")
            },
            /**
             * 标签点击事件
             * @param path 跳转路径
             */
            handleClick(path, index) {
                if (this.$route.path !== path) {
                    this.nowTagIndex = index
                    this.$router.push(path)
                    this.$set(this, "path", this.$route.path)
                }
            },
            /**
             * 标签关闭事件
             * @param index
             */
            handleClose(index) {
                this.tags.splice(index, 1);
                this.nowTagIndex = index - 1 >= 0 ? index - 1 : ''
                if (index !== 0 && this.$route.path !== this.tags[index - 1].path) {
                    this.$router.push(this.tags[index - 1].path)
                    this.$set(this, "path", this.$route.path)
                }
                if (index === 0 && this.$route.path !== "/welcome") {
                    this.$router.push("/welcome")
                    this.$set(this, "path", "/welcome")
                }
            },
            /**
             * 跳转到订餐申请页
             */
            toNewOrder() {
                this.$router.push("/neworder")
                this.menuClick("/neworder")
                this.$set(this, "path", "/neworder")
            },
            /**
             * 跳转到个人订餐页
             */
            toPersonalList() {
                this.$router.push("/personallist")
                this.menuClick("/personallist")
                this.$set(this, "path", "/personallist")
            },
            /**
             * 跳转到订餐确认页
             */
            toOrderCommit(orderno) {
                const query = {}
                orderno && (query.orderno = orderno)

                this.$router.push({
                    path: "/ordercommit",
                    query
                })
                this.menuClick("/ordercommit")
                this.$set(this, "path", "/ordercommit")
            }
        },
        computed: {
            //头像
            headPhoto() {
                let src = this.$store.state.headPhoto
                if (src) {
                    return src
                } else {
                    return require('@/assets/img/head_photo.png')
                }
            }
        },
        watch: {
            nowTagIndex(index, oldIndex) {
                index = index === null ? "" : index
                oldIndex = oldIndex === null ? "" : oldIndex
                this.$nextTick(() => {
                    document.getElementById("tag" + index).classList.add("selected")
                    document.getElementById("tag" + oldIndex).classList.remove("selected")
                })
            },
            'tags.length'(newVal, oldValue) {
                if (newVal > oldValue) {
                    this.nowTagIndex = newVal - 1 >= 0 ? newVal - 1 : ''
                }
            }
        },
        created() {
            //生成菜单序号
            this.$store.state.menuData.slice(1).forEach((item, index) => {
                this.menuIndex.push(index + '')
            })
            
            //当前页标签高亮
            if (this.tags.length === 0) {
                this.$nextTick(() => {
                    document.getElementById("tag").classList.add("selected")
                })
            } else if (this.tags.length === 1) {
                this.$nextTick(() => {
                    this.nowTagIndex = 0
                })
            }
        }
    }
</script>

<style scoped>
  .home {
    height: 100vh;
    overflow: hidden;
  }
  .el-main {
    background-color: #eaedf1;
    padding: 0 20px;
    overflow: hidden;
  }
  .el-container {
    height: 100%;
  }
  /*头部样式*/
  .el-header {
    background-color: #409EFF;
    display: flex;
    /*左右贴边*/
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: #fff;
    font-size: 20px;
  }
  .el-header>div {
    display: flex;
    align-items: center;
  }
  .el-header>div>span {
    cursor: pointer;
  }
  .el-header span {
    margin-left: 15px;
  }
  .el-menu-item {
    padding-left: 20px;
  }
  .headPhoto {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }
  .tags {
    height: 58px;
    display: flex;
    align-items: center;
    user-select: none;
  }
  .tags > div {
    width: 100%;
    border-bottom: 4px solid rgba(64,158,255,0.7);
  }
  .tag {
    font-size: 16px;
    text-align: center;
    width: 130px;
  }
  .tag:hover {
    font-weight: bold;
  }
  .selected {
    font-weight: bold;
  }
</style>